<template>
    <div id="manage-virtual-machine">
        <div class="manage-echart-box">
            <el-row>
                <el-col :span="18">
                    <el-row :gutter="50">
                        <el-col :span="8">
                            <div class="fl" style="width:95px;">
                                <!-- <PieEcharts :id='diskOptions.diskid' :color='diskOptions.diskcolor' :optionsList="diskOptions"  style="width:100%;;height:95px; "></PieEcharts> -->
                                <PieEcharts :id="diskOptions.diskid" :color='diskOptions.diskcolor' :data="diskOptions2"  style="width:100%;;height:95px; "></PieEcharts>
                            </div>
                            <div class="fl echart-text">
                                <p><span>磁盘容量：</span>{{ diskOptions.diskTotal }}</p>
                                <p><span>已使用：</span>{{ diskOptions.diskUsed }}</p>
                                <p><span>未使用：</span>{{ diskOptions.diskFree }}</p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="fl" style="width:95px;">
                                <PieEcharts :id="ramOptions.ramid" :color='ramOptions.ramcolor' :data="ramOptions2"  style="width:100%;;height:95px; "></PieEcharts>
                            </div>
                            <div class="fl echart-text">
                                <p><span>内存容量：</span>{{ ramOptions.ramTotal }}</p>
                                <p><span>已使用：</span>{{ ramOptions.ramUsed }}</p>
                                <p><span>未使用：</span>{{ ramOptions.ramFree }}</p>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="fl" style="width:95px;">
                                <PieEcharts :id="cpuOptions.cpuid" :color='cpuOptions.cpucolor' :data="cpuOptions2"  style="width:100%;;height:95px; "></PieEcharts>
                            </div>
                            <div class="fl echart-text">
                                <p><span>CPU核数：</span>{{ cpuOptions.cpuTotal }}</p>
                                <p><span>使用率：</span>{{ cpuOptions.cpuPercent }}</p>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <div class="destroy-switch">
                        <el-tooltip content="开启后每日凌晨01:00自动销毁虚拟机" placement="bottom">
                            <el-switch
                                v-model="destroyValue"
                                active-color="#13ce66"
                                :inactive-value="false"
                                @change="Switch">
                            </el-switch>
                        </el-tooltip>
                        <span>开启自动销毁</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="manage-class-search">
            <el-form :inline="true" class="demo-form-inline clearfix" :model="form">
                <el-form-item label="状态：">
                    <el-select v-model="form.virtualValue" placeholder="请选择状态">
                        <el-option
                            v-for="item in form.virtualOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生/教师信息：">
                <el-input type="text" v-model="form.studentInfo" style="width: 50%;" placeholder="请输入学生信息" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item >
                    <div class="button-style" @click="Search">搜 索</div>
                </el-form-item>
                <el-form-item style="float: right;">
                    <div class="button-style" @click="Delete">批量删除</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="virtual-machine-tips">
            提示：可批量删除状态为“停止”状态的虚拟机
             <div style="text-align:right;color:#727272">服务器集群整体容器启动数量: {{ number }}</div>
        </div>
        <div class="table">
            <el-table  :data="tableData" ref="multipleTable"  style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="100"></el-table-column>
                <el-table-column prop="username"label="姓名"></el-table-column>
                <el-table-column prop="userNumber" label="学号/工号"></el-table-column>
                <!-- <el-table-column prop="className" label="班级名称"></el-table-column>
                <el-table-column prop="grade" label="年级"></el-table-column>
                <el-table-column prop="chapterName"label="章节"></el-table-column> -->
                <el-table-column prop="containerName"label="虚拟机名称"></el-table-column>
                <el-table-column prop="imageName"label="镜像名称"></el-table-column>
                <el-table-column prop="ip"label="IP地址" width="130"></el-table-column>
                <el-table-column prop="status"label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.status == 1 ? '运行' : '停止' }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import PieEcharts from '@/components/PieEcharts.vue'
    export default {
        components: {
            PieEcharts
        },
        data () {
            return {
                // 课程ID
                coursesId: '',
                // 磁盘数量
                diskOptions:{
                    diskid:'diskcharts',
                    diskTotal: '',
                    diskUsed: '',
                    diskFree: ''
                },
                diskOptions2: {},
                // 内存数量
                ramOptions: {
                    ramid:'ramecharts',
                    ramTotal: '',
                    ramUsed: '',
                    ramFree: ''
                },
                ramOptions2: {},
                // CPU数量
                cpuOptions: {
                    cpuid:'cpuecharts',
                    cpuTotal: '',
                    cpuPercent: ''
                },
                cpuOptions2: {},
                // cpu使用率
                form:{
                   virtualValue:'',
                   virtualOptions:[
                        {
                            value: '',
                            label: '全部'
                        },
                        {
                            value: '1',
                            label: '运行'
                        },
                        {
                            value: '2',
                            label: '停止'
                        }
                   ],
                   studentInfo: ''
                },
                // 实验课列表
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                // 全选集合
                multipleSelection: [],
                //销毁按钮
                destroyValue: '',
                options: {},

                //
                number:''
            }
        },
        created () {
            let self = this
            // 课程ID
            self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
            // 初始化容量
            self.InitCapacity()

            // 初始化销毁开关
            self.InitSwitch()

            // 初始化实验课列表
            self.InitCourseList()
            //获取服务器集群数
            self.getnumber()
        },
        methods: {
            //新需求获取集群数量
            getnumber(){
                this.$http.get('/tes/container/running').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        this.number = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },            
            // 初始化容量
            InitCapacity(){
                let self = this
                self.$http.get('/tes/container/hosts-capacity').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 磁盘
                        self.diskOptions.diskTotal = res.data.diskTotal
                        self.diskOptions.diskUsed = res.data.diskUsed
                        self.diskOptions.diskFree = res.data.diskFree

                        self.diskOptions2 = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: '磁盘容量',
                                    type:'pie',
                                    radius: ['40%', '70%'],  //控制圆弧的宽窄
                                    avoidLabelOverlap: false,
                                    hoverAnimation: false,  //鼠标经过的动画
                                    itemStyle : {
                                        normal : {
                                            label : {
                                                show : false   //隐藏标示文字
                                            },
                                            labelLine : {
                                                show : false   //隐藏标示线
                                            }
                                        }
                                    },
                                    data:[
                                        {
                                            value: (res.data.diskUsedKB / 1024 / 1024).toFixed(2),
                                            name: '使用',
                                            itemStyle: {
                                                color: '#3aa0ff' //突出的颜色
                                            }
                                        },
                                        {
                                            value: ((res.data.diskTotalKB - res.data.diskUsedKB)  / 1024 / 1024).toFixed(2),
                                            name: '未使用',
                                            itemStyle: {
                                                color: '#ebeae6'
                                            },
                                            emphasis:{
                                                itemStyle: {
                                                    color: '#ebeae6'
                                                }
                                            }
                                        }
                                    ]
                                },
                            ]
                        }

                        // 内存
                        self.ramOptions.ramTotal = res.data.ramTotal
                        self.ramOptions.ramUsed = res.data.ramUsed
                        self.ramOptions.ramFree = res.data.ramFree

                        self.ramOptions2 = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: '内存容量',
                                    type:'pie',
                                    radius: ['40%', '70%'],  //控制圆弧的宽窄
                                    avoidLabelOverlap: false,
                                    hoverAnimation: false,  //鼠标经过的动画
                                    itemStyle : {
                                        normal : {
                                            label : {
                                                show : false   //隐藏标示文字
                                            },
                                            labelLine : {
                                                show : false   //隐藏标示线
                                            }
                                        }
                                    },
                                    data:[
                                        {
                                            value: (res.data.ramUsedKB  / 1024 / 1024).toFixed(2),
                                            name: '使用',
                                            itemStyle: {
                                                color: '#3aa0ff' //突出的颜色
                                            }
                                        },
                                        {
                                            value: ((res.data.ramTotalKB - res.data.ramUsedKB)  / 1024 / 1024).toFixed(2),
                                            name: '未使用',
                                            itemStyle: {
                                                color: '#ebeae6'
                                            },
                                            emphasis:{
                                                itemStyle: {
                                                    color: '#ebeae6'
                                                }
                                            }
                                        }
                                    ]
                                },
                            ]
                        }

                        // cpu
                        self.cpuOptions.cpuTotal = res.data.cpu
                        self.cpuOptions.cpuPercent = res.data.cpuPercent

                        self.cpuOptions2 = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b}: {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: 'CPU核数',
                                    type:'pie',
                                    radius: ['40%', '70%'],  //控制圆弧的宽窄
                                    avoidLabelOverlap: false,
                                    hoverAnimation: false,  //鼠标经过的动画
                                    itemStyle : {
                                        normal : {
                                            label : {
                                                show : false   //隐藏标示文字
                                            },
                                            labelLine : {
                                                show : false   //隐藏标示线
                                            }
                                        }
                                    },
                                    data:[
                                        {
                                            value: res.data.cpuUsed,
                                            name: '使用',
                                            itemStyle: {
                                                color: '#3aa0ff' //突出的颜色
                                            }
                                        },
                                        {
                                            value: res.data.cpu - res.data.cpuUsed,
                                            name: '未使用',
                                            itemStyle: {
                                                color: '#ebeae6'
                                            },
                                            emphasis:{
                                                itemStyle: {
                                                    color: '#ebeae6'
                                                }
                                            }
                                        }
                                    ]
                                },
                            ]
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化销毁开关
            InitSwitch() {
                let self = this
                self.$http.get('/tes/container/deleted-switch').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.destroyValue = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 初始化实验课列表
            InitCourseList() {
                let self = this
                self.$http.get('/tes/container/?pageNum='+self.currentPage+'&pageSize='+self.pagesize+'&userInfo='+self.form.studentInfo+'&status='+self.form.virtualValue).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.totalCount = res.data.total
                        self.tableData = res.data.content
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 禁止状态为运行的行
            selectable(row, index){
                if((row.status === 2)){
                    return true
                }else{
                    return false
                }
            },
            // 全选存值
            handleSelectionChange(val) {
                let valArr = [], valArrId = []
                for(let i = 0; i < val.length; i++){
                    if(val[i].status == 1){
                        valArr.push(val[i])
                    }
                    if(val[i].status == 2){
                        valArrId.push(val[i].containerId)
                    }
                }
                if (valArr) {
                    valArr.forEach(row => {
                        console.log(row)
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection()
                }
                this.multipleSelection = valArrId
            },
            // 分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.InitCourseList()
            },
            // 销毁开关切换
            Switch(){
                let self = this
                self.$http.post('/tes/container/deleted-switch',{
                    switchOn: self.destroyValue
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (self.destroyValue) {
                            self.$message({
                                message: '开启成功',
                                type: 'success'
                            })
                        }else{
                            self.$message({
                                message: '关闭成功',
                                type: 'success'
                            })
                        }

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 搜索
            Search() {
                let self = this
                // 回调实验课列表
                self.InitCourseList()
            },
            // 删除
            Delete() {
                let self = this
                // 判断是否选中
                if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的人',
                        type: 'warning'
                    })
					return
                }
                self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    self.$http.post('/tes/container/delete', self.multipleSelection).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.currentPage = 1
							self.InitCourseList()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
				})
            }
        }
    }
</script>

<style lang="scss">
    #manage-virtual-machine{
        .manage-class-search{
            .el-form-item{
                .el-input__icon{
                    line-height: 32px;
                }
            }
        }
    }
</style>

<style lang="scss" scoped>
    @import "../../../styles/layout/color_variables";
    .jx-content{
        margin-top: 20px;
    }
    #manage-virtual-machine{
        .manage-class-search{
            margin: 23px 0 25px;
            height: 32px;
            .button-style{
                width: 90px;
            }
            .el-form-item{
                &:last-child{
                    margin-right: 0;
                }
                .button-style{
                    margin-left: 20px;
                }
            }
        }
        .dialog-add{
            .button-style{
                width: 90px;
            }
            .dialog-footer{
                text-align: center;
            }
        }
        .manage-echart-box{
            margin-top: 30px;
            padding-left: 50px;
            .echart-text{
                margin-top: 15px;
                margin-left: 2px;
                font-size: 14px;
                color: #727272;
                p{
                   line-height: 20px;
                }
                span{
                    width: 65px;
                    text-align: right;
                }
            }
        }
        //开启自毁
        .destroy-switch{
            text-align: right;
            margin: 30px 70px 0 0;
            .el-switch{
                margin-right: 20px;
            }
        }
        .virtual-machine-tips{
            font-size: 14px;
            color: #1277eb;
            line-height: 1;
            margin: 25px 0 20px;
             display: flex;
            justify-content: space-between;
        }
    }
</style>
